$(function () {
  initArtCateList()
  function initArtCateList() {
    axios.get('/my/article/cates').then(res => {
      if (res.data.status !== 0) {
        return
      }
      let arr=[]
      res.data.data.forEach(element => {
        arr.push(`
        <tr>
              <td>${element.Id}</td>
              <td>${element.name}</td>
              <td>${element.alias}</td>
              <th>
                <button type="button" class="btn-edit layui-btn layui-btn-xs" data-id="${element.Id}">修改</button>
                <button type="button" class="btn-del layui-btn layui-btn-danger layui-btn-xs" data-id="${element.Id}">删除</button>
              </th>
            </tr>
        `)
      });
      $('tbody').html(arr.join(''))
      console.log(res);
    })
  }
 
  $('#btnShowAdd').on('click',function(){
    layer.open({
      type:1,
      title: '添加文章分类',
      area: ['500px', '260px'],
      content: `
      <form id="addForm" class="layui-form" action="">
      
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
              <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
              <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      `,
      }); 
  })
  //添加类目
  $('body').on('submit', '#addForm', function (e) {
    e.preventDefault()
    axios.post('/my/article/addcates', $(this).serialize()).then(res => {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layer.closeAll()
      layer.msg(res.data.message)
      initArtCateList()
    // console.log(res);
  })
  })
  //修改
  let id
  let del_id
  $('tbody').on('click', '.btn-edit', function () {
    id = $(this).attr('data-id')
    
    layer.open({
      type:1,
      title: '修改文章分类',
      area: ['500px', '260px'],
      content: `
      <form lay-filter="formTest" id="editForm" class="layui-form" action="">
      <input hidden type="text" name="Id" >
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
              <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
              <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      `,
    }); 
    axios.get(`/my/article/cates/${id}`).then(res => {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layui.form.val("formTest",res.data.data);
      console.log(res);
    })
  })
  //修改
  $('body').on('submit', '#editForm',function (e) {
    e.preventDefault()
    console.log(id);
    $('[name="Id"]').val(id)
    axios.post('/my/article/updatecate', $(this).serialize()).then(res => {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layer.closeAll()
      layer.msg(res.data.message)
      initArtCateList()
      // console.log(res);
    })
  })
  //重置
  $('body').on('reset', '#editForm', function (e) {
    e.preventDefault()
    axios.get(`/my/article/cates/${id}`).then(res => {
      if (res.data.status !== 0) {
        return layer.msg(res.data.message)
      }
      layui.form.val("formTest",res.data.data);
      console.log(res);
    })
  })
  //删除
  $('tbody').on('click', '.btn-del', function () {
    del_id=$(this).attr('data-id')
    layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
      //do something
      axios.get(`/my/article/deletecate/${del_id}`).then(res => {
        if (res.data.status !== 0) {
          return layer.msg(res.data.message)
        }
        layer.msg('恭喜你,删除成功')
        initArtCateList()
        console.log(res);
      })
      layer.close(index);
    });
    
  })
})